import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:flutter_demo/core/common/values/gaps.dart';
import 'package:flutter_demo/ui/pages/bar/controller.dart';
import 'package:flutter_demo/ui/pages/bar/widgets/my_loading.dart';
import 'package:flutter_demo/ui/pages/status/event/event_test__widget.dart';
import 'package:flutter_demo/ui/pages/status/inherited/inherited_test_widget.dart';
import 'package:flutter_demo/ui/pages/status/provider/provider_test_widget.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'dart:ui' as ui;

import 'package:pull_to_refresh_flutter3/pull_to_refresh_flutter3.dart';

class MoviesPage extends StatefulWidget {
  const MoviesPage({Key? key}) : super(key: key);

  @override
  _MoviesPageState createState() => _MoviesPageState();
}

class _MoviesPageState extends State<MoviesPage> {
  CarouselController _carouselController = new CarouselController();
  RefreshController _refreshController = RefreshController();

  final _barController = Get.find<BarController>();

  int _current = 0;

  static const List<dynamic> _movies = [
    {
      'title': 'Black Widow',
      'image':
          'https://pics0.baidu.com/feed/838ba61ea8d3fd1f69c4d0a322ef171397ca5f82.jpeg?token=864c3f289b34d45e17039fcd8fd307a7',
      'description': 'Black Widow'
    },
    {
      'title': 'The Suicide Squad',
      'image':
          'https://img0.baidu.com/it/u=2932188870,235853835&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=950',
      'description': 'The Suicide Squad'
    },
    {
      'title': 'Godzilla Vs Kong',
      'image':
          'https://img.jianbihua.com/sites/default/files/styles/nochange/public/images/2019-02/20190227170143_981908.jpg',
      'description': 'Godzilla Vs Kong'
    }
  ];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final _listScroll = ScrollController();
    _listScroll.addListener(() {
      _barController.updateBar(_listScroll.position.pixels);
      print(_listScroll.position.pixels);
    });

    return GetBuilder<BarController>(
        id: "barChange",
        builder: (control) {
          return Stack(children: [
            control.ifTransparent.value
                ? SizedBox(
                    height: MediaQuery.of(context).size.height * 0.5,
                    width: MediaQuery.of(context).size.width,
                    child: Image.network(_movies[_current]['image'],
                        fit: BoxFit.cover),
                  )
                : SizedBox.shrink(),
            control.ifTransparent.value
                ? Positioned(
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    child: BackdropFilter(
                      filter: ui.ImageFilter.blur(sigmaX: 20.0, sigmaY: 20.0),
                      child: Container(
                        height: MediaQuery.of(context).size.height * 0.5,
                      ),
                    ))
                : SizedBox.shrink(),
            Positioned(
                top: control.ifTransparent.value ? 105 : 18,
                height: MediaQuery.of(context).size.height,
                width: MediaQuery.of(context).size.width,
                child: SmartRefresher(
                    controller: _refreshController,
                    header: WaterDropHeader(
                      waterDropColor: Colors.green.shade700,
                      refresh: MyLoading(),
                      complete: Container(),
                      completeDuration: Duration.zero,
                    ),
                    onRefresh: () => _refreshController.refreshCompleted(),
                    child: ListView(controller: _listScroll, children: [
                      CarouselSlider(
                        options: CarouselOptions(
                          height: 500.0,
                          autoPlay: true,
                          aspectRatio: 16 / 9,
                          viewportFraction: 0.70,
                          enlargeCenterPage: true,
                          onPageChanged: (index, reason) {
                            setState(() {
                              _current = index;
                            });
                          },
                        ),
                        carouselController: _carouselController,
                        items: _movies.map((movie) {
                          return Builder(
                            builder: (BuildContext context) {
                              return Container(
                                  width: MediaQuery.of(context).size.width,
                                  margin: EdgeInsets.symmetric(horizontal: 5.0),
                                  decoration: BoxDecoration(
                                    color: Colors.white,
                                    borderRadius: BorderRadius.circular(20.0),
                                  ),
                                  child: SingleChildScrollView(
                                    child: Column(
                                      children: [
                                        Container(
                                          height: 320,
                                          margin: EdgeInsets.only(top: 30),
                                          clipBehavior: Clip.hardEdge,
                                          decoration: BoxDecoration(
                                            borderRadius:
                                                BorderRadius.circular(20),
                                          ),
                                          child: Image.network(movie['image'],
                                              fit: BoxFit.cover),
                                        ),
                                        SizedBox(height: 20),
                                        Text(
                                          movie['title'],
                                          style: TextStyle(
                                              fontSize: 16.0,
                                              fontWeight: FontWeight.bold),
                                        ),
                                        // rating
                                        SizedBox(height: 20),
                                        Container(
                                          child: Text(
                                            movie['description'],
                                            style: TextStyle(
                                                fontSize: 14.0,
                                                color: Colors.grey.shade600),
                                            textAlign: TextAlign.center,
                                          ),
                                        ),
                                        SizedBox(height: 20),
                                        AnimatedOpacity(
                                          duration: Duration(milliseconds: 500),
                                          opacity:
                                              _current == _movies.indexOf(movie)
                                                  ? 1.0
                                                  : 0.0,
                                          child: Container(
                                            padding: EdgeInsets.symmetric(
                                                horizontal: 20.0),
                                            child: Row(
                                              mainAxisAlignment:
                                                  MainAxisAlignment
                                                      .spaceBetween,
                                              children: [
                                                Container(
                                                  child: Row(
                                                    children: [
                                                      Icon(
                                                        Icons.star,
                                                        color: Colors.yellow,
                                                        size: 20,
                                                      ),
                                                      SizedBox(width: 5),
                                                      Text(
                                                        '4.5',
                                                        style: TextStyle(
                                                            fontSize: 14.0,
                                                            color: Colors
                                                                .grey.shade600),
                                                      )
                                                    ],
                                                  ),
                                                ),
                                                Container(
                                                  child: Row(
                                                    children: [
                                                      Icon(
                                                        Icons.access_time,
                                                        color: Colors
                                                            .grey.shade600,
                                                        size: 20,
                                                      ),
                                                      SizedBox(width: 5),
                                                      Text(
                                                        '2h',
                                                        style: TextStyle(
                                                            fontSize: 14.0,
                                                            color: Colors
                                                                .grey.shade600),
                                                      )
                                                    ],
                                                  ),
                                                ),
                                                Container(
                                                  width: MediaQuery.of(context)
                                                          .size
                                                          .width *
                                                      0.2,
                                                  child: Row(
                                                    children: [
                                                      Icon(
                                                        Icons
                                                            .play_circle_filled,
                                                        color: Colors
                                                            .grey.shade600,
                                                        size: 20,
                                                      ),
                                                      SizedBox(width: 5),
                                                      Text(
                                                        'Watch',
                                                        style: TextStyle(
                                                            fontSize: 14.0,
                                                            color: Colors
                                                                .grey.shade600),
                                                      )
                                                    ],
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ));
                            },
                          );
                        }).toList(),
                      ),
                      Container(
                        child: Text("abc"),
                        alignment: Alignment.center,
                        height: 500,
                      )
                    ])))
          ]);
        });
  }
}
